<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('指标：' + ${target?.name})" />
    <link th:href="@{/static/css/input/top_search.css?v=1.0.6}" rel="stylesheet">
    <style>
        /*顶部title*/
        .font_p3{
            font-size: 13px;
            margin: 2px 0 0 0;
        }
        .font_color_qian{
            color: #9b9b9c;
        }
        #result-list-ul>li:hover{
            background-color: #e5e5e5;
        }
        #search_result_title{
            cursor: pointer;
            width: 315px;
        }

        #search_input_div{
            height: 50px;
            width: 50%;
            position: relative;
            margin-top: 24px;
            margin-right: 28px;
        }

        #logout_btn_div{
            width: 50px;
            height: 50px;
            right: 0;
            background-color: #128ef2;
            border-radius: 6px;
            color: #FFF;
            line-height: 50px;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
        }


        /*主内容*/
        html,body{
            height: 100%;
        }
        .table1 .dictTd{
            vertical-align: top !important;
            border-top: none !important;
        }
        .table1 td{
            text-align: center;
            vertical-align: middle !important;
            border-top: none !important;
        }

        .table2 blockquote{
            font-size: 16px;
            text-align: left;
            padding: 10px 0 10px 20px;
            margin-bottom: 0;
        }
        .opt-td{
            padding: 0 !important;
        }
        .opt-td div{
            float: right;
            margin-right: 15px;
        }
        .opt-td span{
            font-size: 12px;
            cursor: pointer;
        }
        .opt-td i{
            font-size: 26px;
            cursor: pointer;
        }
        .opt-td i:hover,.opt-td span:hover{
            font-weight: bold;
        }

        .zanCount{
            position: absolute;
            margin-right: 0 !important;
            right: -6px;
            top: -10px
        }

        .table2 .opt-td{
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select:none;
            -khtml-user-select:none;
            -webkit-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .radar_box{
            height: 224px;
            width: 224px;
            display: inline-block;
            flex: none;
            margin: 0 5px;
        }
    </style>
</head>

<body style="overflow-x: hidden">

<div id="container" class="cls-container" style="padding-bottom: 0; padding-top: 0">

    <!--&lt;!&ndash;顶部图片&ndash;&gt;-->
    <!--<div id="header_div" style="margin-bottom: 10px">-->
        <!---->
    <!--</div>-->

    <div id="header_div" class="row  bg-dark" style="margin-bottom: 10px">

        <!--左侧title-->
        <div class="col-xs-5 text-left" onclick="window.location.href='/'" style="cursor: pointer">
<!--            <div class="col-xs-8 text-right" id="search_result_title" onclick="window.location.href='/'">-->
<!--                <span class="text-bold text-primary" style="font-size: 70px">NET</span>-->
<!--                <span class="text-bold" style="font-size: 70px">LAB</span>-->
<!--            </div>-->
<!--            <div class="col-xs-4 text-left" style="width: 240px">-->
<!--                <p class="font_p3 text-bold" style="margin-top: 22px">OpenData Project</p>-->
<!--                <p class="font_p3 font_color_qian">By Hospital Quality Research</p>-->
<!--                <p class="font_p3 font_color_qian">医院质量大数据开放实验室</p>-->
<!--            </div>-->
            <img src="/static/img/title_search.png" height="100px" width="auto" style="padding: 25px 0 25px 20px"/>
        </div>

        <!--右侧搜索框-->
        <div class="col-xs-7">
            <div id="search_input_div" class=" pull-right">

                <div id="logout_btn_div" class="search-wrapper" onclick="window.location.href='/logout'">
                    <i class="fa fa-sign-out"></i>
                </div>

                <div class="search-wrapper">
                    <div class="input-holder">
                        <input type="text" id="search_input" class="search-input" placeholder="Search..." autocomplete="off" />
                        <button class="search-icon" onclick="searchToggle(this, event);">
                            <span></span>
                        </button>
                    </div>
                    <span class="close" onclick="searchToggle(this, event);"></span>
                </div>

            </div>
        </div>

    </div>

    <th:block th:if="${target != null}">
        <!--左侧指标数据-->
        <div class="col-md-6 col-sm-12 wiki-data-div" style="min-height: 700px; margin-right: -5px">
            <div class="panel" style="height: 100%">
                <div class="panel-heading">
                    <h3 class="panel-title">[[${target?.name}]]</h3>
                </div>
                <div class="panel-body" style="height: 93%; overflow-y: auto; overflow-x: hidden">

                    <th:block th:if="${#lists.isEmpty(wikiDescList)}">
                        <div class="row text-center text-muted mar-top text-2x" style="margin-top: 30%">此指标暂无任何指标描述...</div>
                    </th:block>

                    <th:block th:if="${!#lists.isEmpty(wikiDescList)}">
                        <table id="desc-table" class="table table1">
                            <tbody>

                            <tr style="border-bottom: 1px solid #CCC" th:each="dict,i : ${wikiDescList}">

                                <td width="15%" class="dictTd" style="text-align: left">
                                    <span class="text-bold" style="font-size: 12px; color: #7e8b99">[[${dict.dictName}]]</span>
                                </td>

                                <td style="padding-bottom: 0">
                                    <table class="table table2" style="margin-bottom: 0">
                                        <tbody>
                                        <th:block th:each="desc,j : ${dict.wikiTargetDescVoList}">
                                            <tr th:id="${desc.id}" style="border-left: 4px solid #CCC">
                                                <td class="content-td" width="60%">
                                                    <div th:utext="${desc.content}" class="text-left" th:title="${desc.version}"></div>
                                                </td>

                                                <td class="opt-td" width="40%">
                                                    <div class="text-dark bolun" th:data-content="${desc.id}">
                                                        <i class="fa fa-frown-o"></i><br/><span>驳论</span>
                                                    </div>
                                                    <div th:if="${desc.ifZan}" class="text-success dianzan icobutton" th:data-content="${desc.id}" style="position: relative" title="您已点过赞">
                                                        <i class="fa fa-thumbs-up"></i><br/><span>点赞</span>
                                                        <div class="zanCount"  th:text="${desc.zanCount}"></div>
                                                    </div>
                                                    <div th:if="${!desc.ifZan}" class="text-success dianzan icobutton" th:data-content="${desc.id}" style="position: relative">
                                                        <i class="fa fa-thumbs-o-up"></i><br/><span>点赞</span>
                                                        <div class="zanCount" th:text="${desc.zanCount}"></div>
                                                    </div>
                                                    <div class="text-purple jieshi" th:data-content="${desc.id}">
                                                        <i class="fa fa-question-circle-o"></i><br/><span>解释</span>
                                                    </div>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" th:data-title="${desc.id}">
                                                    <div style="display: none; border: 1px solid #CCC">
                                                        <div class="row text-purple text-left text-bold pad-lft pad-rgt text-2x">
                                                            <span class="fa fa-question-circle-o"></span>
                                                            <span>描述解释</span>
                                                        </div>
                                                        <div class="row text-left pad-lft pad-rgt">
                                                            [[${desc.explanation}]]
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </th:block>
                                        </tbody>
                                    </table>
                                </td>

                            </tr>

                            </tbody>
                        </table>
                    </th:block>

                </div>
            </div>
        </div>

        <div class="col-md-6 col-sm-12 wiki-data-div" style="min-height: 700px">

            <div class="panel" style="height: 500px; margin-bottom: 10px">
                <div class="panel-heading">
                    <h3 class="panel-title">指标关系图</h3>
                </div>
                <div class="panel-body" style="padding-top: 5px">
                    <div id="echart-related" style="height: 430px"></div>
                </div>
            </div>

            <div class="panel" style="height: 292px; margin-bottom: 0">
                <div class="panel-heading">
                    <h3 class="panel-title">指标评测</h3>
                </div>
                <div id="radarDiv" class="panel-body" style="padding: 0; overflow-x: auto; display: flex">
<!--                    <th:block th:each="index:${#numbers.sequence(0,100)}">-->
<!--                        <div class="pull-left radar_box"></div>-->
<!--                    </th:block>-->
                </div>
            </div>

        </div>
    </th:block>

    <th:block th:if="${target == null}">
        <div class="panel">
            <div class="panel-body">
                <p >没有这个指标...</p>
            </div>
        </div>
    </th:block>

</div>

</body>

<th:block th:include="include :: footer" />
<script type="text/javascript" charset="utf-8" th:src="@{/static/css/input/mo.min.js}"></script>
<script th:inline="javascript">

    var id = [[${target?.id}]];

    $(function(){
        init_height();
        init_zan();
        init_echart_related();
        init_echart_radar();
    });

    //固定高度
    function init_height(){
        var body_h = $(document.body).height();
        var header_h = $("#header_div").height();
        $(".wiki-data-div").height(body_h - header_h -25);
    }

    //点击描述解释
    $("#desc-table").on("click", ".jieshi", function(){
        var $btn = $(this)[0];
        var id = $(this).attr("data-content");
        $("td[data-title='"+id+"']>div").slideToggle("fast");
    });

    //点击驳论
    $("#desc-table").on("click", ".bolun", function(){
        var id = $(this).attr("data-content");
        __layX_html_read(id, "驳论", ctx + "targetDescEvaluate/view/"+id, {
            width : "28%"
        });
    });

    //关系图
    function init_echart_related(){
        var relatedDic = document.getElementById("echart-related");
        var relatedChart = echarts.init(relatedDic);

        relatedChart.showLoading();
        $.ajax({
            type : "get",
            url : ctx + "relatedXml/"+id,
            contentType : "application/x-www-form-urlencoded; charset=utf-8",
            data : {},
            error : function(data){
                relatedChart.hideLoading();
                __toastr_error("获取关系图时出错");
            },
            success : function(xml){
                relatedChart.hideLoading();
                var graph = echarts.dataTool.gexf.parse(xml);
                console.log(xml);
                var categories = [];
                for (var i = 0; i < 10; i++) {
                    categories[i] = {
                        name: ''
                    };
                }
                graph.nodes.forEach(function (node) {
                    node.itemStyle = null;
                    node.value = node.symbolSize;
                    node.symbolSize /= 1.5;
                    node.label = {
                        show: node.symbolSize > 30
                    };
                    node.category = node.attributes.modularity_class;
                });
                var option = {
                    title: {
                        text: '',
                        subtext: '',
                        top: 'bottom',
                        left: 'right'
                    },
                    tooltip: {
                        // formatter : "{a}<br/>{b}"
                        formatter : function(params, ticket, callback){
                            var name = params.name;
                            if(name.length === 65 && name.indexOf("_")>=0){
                                name = "";
                            }
                            return name;
                        }
                    },
                    legend: [{
                        left : '5px',
                        orient : 'vertical',
                        data: categories.map(function (a) {
                            return a.name;
                        })
                    }],
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series : [
                        {
                            zoom : 0.8,
                            name: '指标',
                            type: 'graph',
                            layout: 'none',
                            data: graph.nodes,
                            links: graph.links,
                            categories: categories,
                            roam: true,
                            focusNodeAdjacency: true,
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            },
                            label: {
                                position: 'right',
                                formatter: '{b}'
                            },
                            lineStyle: {
                                color: 'source',
                                curveness: 0.3
                            },
                            emphasis: {
                                lineStyle: {
                                    width: 10
                                }
                            }
                        }
                    ]
                };
                relatedChart.setOption(option);
            }
        });

        //点击一个指标圆圈直接进入此指标详情页
        relatedChart.on('click', function (params) {
            var thisId = params.data.id;
            if(thisId !== id){
                window.location.href = "/wiki/"+thisId;
            }
        });

    }

    function init_zan(){
        var el22 = $(".icobutton");
        el22.each(function(i){
            var el2 = el22[i];
            var targetDescId = el2.getAttribute("data-content");
            var el2span = el2.querySelector('i');
            if($(el2span).hasClass("fa-thumbs-up")){
                return true;
            }
            new Animocon(el2, {
                tweens : [
                    // burst animation
                    new mojs.Burst({
                        parent: el2,
                        duration: 700,
                        delay: 50,
                        shape : 'circle',
                        fill: '#43c344',
                        x: '-85px',
                        y: '15px',
                        opacity: 0.6,
                        radius: {40:90},
                        count: 16,
                        isRunLess: true,
                        easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
                    }),
                    // ring animation
                    new mojs.Transit({
                        parent: el2,
                        duration: 500,
                        type: 'circle',
                        radius: {0: 50},
                        fill: 'transparent',
                        stroke: '#6a87c3',
                        strokeWidth: {35:0},
                        opacity: 0.6,
                        x: '-75px',
                        y: '15px',
                        isRunLess: true,
                        easing: mojs.easing.ease.inout
                    }),
                    // icon scale animation
                    new mojs.Tween({
                        duration : 1100,
                        onUpdate: function(progress) {
                            if(progress > 0.3) {
                                var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
                                el2span.style.WebkitTransform = el2span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
                            }
                            else {
                                el2span.style.WebkitTransform = el2span.style.transform = 'scale3d(0,0,1)';
                            }
                        }
                    })
                ],
                onCheck : function() {
                    if(isNull(targetDescId)){
                        __toastr_error("未获取到描述id");
                        return false;
                    }
                    if($(el2span).hasClass("fa-thumbs-up")){
                        return false;
                    }
                    el2.style.color = '#71a436';
                    el2span.classList.remove("fa-thumbs-o-up");
                    el2span.classList.add("fa-thumbs-up");
                    __ajax_post(ctx + "targetDesc/zan/"+targetDescId, {}, function(data){
                        if(data.state === 1){
                            var el2count = el2.querySelector('.zanCount');
                            var count = parseInt($(el2count).text());
                            $(el2count).text(count+1);
                        }else{
                            __toastr_error(data.msg);
                        }
                    })
                },
                onUnCheck : function() {
                    // el2.style.color = '#71a436';
                    // el2span.classList.add("fa-thumbs-o-up");
                    // el2span.classList.remove("fa-thumbs-up");
                }
            });

        });


    }

    function extend( a, b ) {
        for( var key in b ) {
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function Animocon(el, options) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );

        this.checked = false;

        this.timeline = new mojs.Timeline();

        for(var i = 0, len = this.options.tweens.length; i < len; ++i) {
            this.timeline.add(this.options.tweens[i]);
        }

        var self = this;
        this.el.addEventListener("click", function() {
            if( self.checked ) {
                self.options.onUnCheck();
            }
            else {
                self.options.onCheck();
                self.timeline.start();
            }
            self.checked = !self.checked;
        });
    }

    //搜索框中回车触发搜索跳转
    $("#search_input").on("keypress", function(){
        if(window.event.keyCode === 13){
            do_inner_search();
        }
    });

    //搜索
    function do_inner_search(){
        $("#search_input").blur();
        var keyVal = $("#search_input").val();
        if(isNotNull(keyVal)){
            window.location.href = "/search_result/"+keyVal;
        }
    }

    //搜索框展开折叠
    function searchToggle(obj, evt){
        if($(obj).hasClass("search-icon")){
            do_inner_search();
        }

        var container = $(obj).closest('.search-wrapper');
        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        } else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            container.find('.search-input').val('');
        }
    }

    //雷达图
    function init_echart_radar(){
        __ajax_get(ctx + "targetEvaluate/radarList", {targetId : id}, function(data){
            if(data.state === 1){
                var list = data.data;
                for(var i=0;i<list.length;i++){
                    var eval = list[i];
                    $("#radarDiv").append("<div id='"+eval.id+"' class='pull-left radar_box'></div>");
                    var chartDom = document.getElementById(eval.id);
                    var myChart = echarts.init(chartDom);
                    myChart.setOption(getRadarOpt(eval.valueList));
                }
            }else{
                __toastr(data);
            }
        })
    }

    function getRadarOpt(valueArr){
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                position: [10, 10]
            },
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [1, 2],
                        fontSize: 10
                    }
                },
                radius : 50,
                indicator: [[${evaluateTypeList}]]
            },
            series: [{
                name: '指标评测雷达图',
                type: 'radar',
                data: [
                    {
                        value: valueArr,
                        name: '指标评测'
                    }
                ]
            }]
        };
        return option;
    }

</script>

</html>